<template>
  <div class="marking"> 
    <head-Menu></head-Menu>
    <div class="MContainer">
      <div class="examHeader" style="text-align:right">
        <h4 style="text-align:center;margin:10px 0 0 0">{{toMarkTextPaper.examName}}</h4>
        <span style="margin-right: 20px;">批改进度：{{num}} / {{answerSheetList.length}}</span> 
      </div>
      <el-divider></el-divider>
      <div class="answerSheet">
        <div v-if="fillBlankList.length != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">填空题
          <div v-for="(data, i) in fillBlankList" v-if="i < fillBlankList.length">
            <h5 style="display:flex">
              <span style="margin-left:5px;max-width:800px;line-height:28px">{{i + 1}}、({{fillBlankScoreList[i]}}分){{data.stem}}</span>
            </h5>
            <el-input style="width:300px" v-model="answerSheetList[num].fillBlankAnsList[i]" v-if="num < answerSheetList.length" disabled></el-input>
            <div style="margin:10px 0 10px 0;font-size:14px">
              分数：
              <el-radio-group v-model="stuFBS[i]">
                <el-radio-button label="0">0 分</el-radio-button>
                <el-radio-button v-for="i in Number(fillBlankScoreList[i])" :label="i">{{i}} 分</el-radio-button>
              </el-radio-group>
            </div>
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span style="margin-right:20px;width:600px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" >点击查看答案</span> 
                </template>
                <div>答案:</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;">{{data.answer}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div v-if="comprehensiveList.length != 0" style="min-height:70px;padding-left: 10px;padding-top:10px">综合题
          <div v-for="(data, i) in comprehensiveList">
            <h5 style="display:flex">
              <span style="margin-left:5px;max-width:800px;line-height:28px">{{i + 1}}、({{comprehensiveScoreList[i]}}分){{data.stem}}</span>
            </h5>
            <el-input style="width:600px" type="textarea" :autosize="{ minRows: 4, maxRows: 30}" v-model="answerSheetList[num].comprehensiveAnsList[i]" disabled></el-input>
            <div style="margin:10px 0 10px 0;font-size:14px">
              分数：
              <el-radio-group v-model="stuCS[i]">
                <el-radio-button label="0">0 分</el-radio-button>
                <el-radio-button v-for="i in Number(comprehensiveScoreList[i])" :label="i">{{i}} 分</el-radio-button>
              </el-radio-group>
            </div>
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span style="margin-right:20px;width:600px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" >点击查看答案</span> 
                </template>
                <div>答案:</div>
                <div style="max-width:800px;word-break: break-all;text-indent: 2em;">{{data.answer}}</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <el-button style="display:flex;margin:10px auto;" @click="uploadScore()" type="primary" round>提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import headMenu from '../../components/headMenu.vue'
import { getAnswerSheet, automaticCorrectPapers } from "../../api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      fillBlankList: [],
      comprehensiveList: [],
      fillBlankScoreList: [],
      comprehensiveScoreList: [],
      answerSheetList: [],
      num: 0,
      stuFBS: [],
      stuCS: [],
      toMarkTextPaper: {},
    }
  },
  components: {
    headMenu
  },
  created() {
    this.toMarkTextPaper = JSON.parse(sessionStorage.getItem('toMarkTextPaper'))
    this.getAnswerSheet()
  },
  methods: {
    async getAnswerSheet() {
      await getAnswerSheet(this.toMarkTextPaper)
        .then((res) => {
          this.fillBlankList = res.fillBlankList
          this.comprehensiveList = res.comprehensiveList
          this.fillBlankScoreList = res.fillBlankScoreList
          this.comprehensiveScoreList = res.comprehensiveScoreList
          this.answerSheetList = res.answerSheetList
          if (this.answerSheetList.length == 0) {
            Toast('评卷已结束')
            this.$router.push({
              path:'/teacher/markTextPaper',
            })
          }
        })
    },
    async automaticCorrectPapers(partialScore) {
      await automaticCorrectPapers({
        partialScore,
        examFileName: this.toMarkTextPaper.examFileName,
        examName: this.toMarkTextPaper.examName,
        account: this.answerSheetList[this.num].account,
        teaAccount: this.toMarkTextPaper.account,
        isFinish: this.num == this.answerSheetList.length - 1?'true':'false',
      })
        .then((res) => {
          this.num += 1
          if (this.num == this.answerSheetList.length) {
            Toast('评卷已结束')
            this.$router.push({
              path:'/teacher/markTextPaper',
            })
          }else{
            Toast(res.msg)
          }
          
        })
    },
    uploadScore() {
      if (this.stuFBS.length != this.fillBlankList.length || this.stuFBS.includes(undefined) == true ||
          this.stuCS.length != this.comprehensiveList.length || this.stuCS.includes(undefined) == true) {
        this.$message({
          message: '还有题目未评分',
          type: 'warning'
        });
      }else{
        let partialScore = 0
        for (let i = 0; i < this.stuFBS.length; i++) { partialScore += this.stuFBS[i] }
        for (let i = 0; i < this.stuCS.length; i++) { partialScore += this.stuCS[i] }
        this.stuFBS = []
        this.stuCS = []
        this.automaticCorrectPapers(partialScore)
      }
    },
  },
}
</script>

<style lang='stylus'>
.marking
  flex 1 1 100%
  display block
  .MContainer
    margin 0 10px
    border 1px solid #CCCCCC  
    text-align center
  .answerSheet
    text-align left
    margin 20px 0 0 30px
    overflow-y auto
    height 500px

</style>